<template>
  <div class="height-100" ref="map" id="map"></div>
</template>
<script>
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import Vue from 'vue';
import DivIcon from '../components/DivIcon.vue';
const DivIconExtend = Vue.extend(DivIcon);
export default {
  mounted() {
    const dom = this.$refs.map;
    const center = [37.6978, 112.70788];
    const map = L.map(dom, {
      center,
      zoom: 10,
    });
    // 使用高德地图瓦片
    L.tileLayer(
      'https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
      {
        subdomains: '1234',
        maxZoom: 21,
        minZoom: 3,
        coordType: 'gcj02',
      }
    ).addTo(map);

    const myIcon = L.divIcon({
      className: 'my-div-icon',
      html: new DivIconExtend({
        propsData: {
          btnName: '按钮',
        },
        methods: {
          onClick() {
            console.log('loving leaflet');
          },
        },
      }).$mount().$el,
    });
    // you can set .my-div-icon styles in CSS

    L.marker(center, { icon: myIcon }).addTo(map);
  },
  // components: {
  //   DivIcon,
  // },
};
</script>
